<script setup lang="ts">
import { DatePicker, parseDate } from "@ark-ui/vue/date-picker";
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-vue-next";

const NUM_OF_MONTHS = 2;
const GOOD_PRICE_THRESHOLD = 100;

const formatDate = (date: Date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
};

const generateMockPriceData = () => {
  const data: Record<string, number> = {};
  const today = new Date();

  for (let i = 0; i < 180; i++) {
    const date = new Date(today);
    date.setDate(today.getDate() + i);
    const dateKey = formatDate(date);
    const randomPrice = Math.floor(Math.random() * (200 - 80 + 1)) + 80;
    data[dateKey] = randomPrice;
  }
  return data;
};

const mockPriceData = generateMockPriceData();

const isDateUnavailable = (date: Date) => {
  return !mockPriceData[formatDate(date)];
};
</script>

<template>
  <DatePicker.Root
    :inline="true"
    :default-value="[parseDate(new Date())]"
    :time-zone="Intl.DateTimeFormat().resolvedOptions().timeZone"
    :is-date-unavailable="
      (date) => {
        return isDateUnavailable(
          date.toDate(Intl.DateTimeFormat().resolvedOptions().timeZone)
        );
      }
    "
    :num-of-months="NUM_OF_MONTHS"
  >
    <DatePicker.Content
      class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xs py-3 inline-block"
    >
      <DatePicker.View
        view="day"
        class="flex divide-x divide-gray-200 dark:divide-gray-700 relative"
      >
        <nav class="absolute w-full top-0 flex justify-between px-3 z-10">
          <DatePicker.PrevTrigger
            class="p-2.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors text-gray-700 dark:text-gray-300"
          >
            <ChevronLeftIcon class="w-4 h-4" />
          </DatePicker.PrevTrigger>
          <DatePicker.NextTrigger
            class="p-2.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors text-gray-700 dark:text-gray-300"
          >
            <ChevronRightIcon class="w-4 h-4" />
          </DatePicker.NextTrigger>
        </nav>
        <DatePicker.Context v-slot="api">
          <div v-for="index in NUM_OF_MONTHS" :key="index" class="px-3">
            <DatePicker.ViewControl
              class="flex justify-center items-center mx-10 mb-1 h-9"
            >
              <DatePicker.ViewTrigger
                class="z-20 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 px-2 py-1 rounded-md transition-colors"
              >
                <span>
                  {{
                    new Intl.DateTimeFormat("default", {
                      month: "long",
                    }).format(
                      api
                        .getOffset({ months: index - 1 })
                        .visibleRange.start.toDate(
                          Intl.DateTimeFormat().resolvedOptions().timeZone
                        )
                    )
                  }}
                  {{
                    api.getOffset({ months: index - 1 }).visibleRange.start.year
                  }}
                </span>
              </DatePicker.ViewTrigger>
            </DatePicker.ViewControl>
            <DatePicker.Table>
              <DatePicker.TableHead>
                <DatePicker.TableRow>
                  <DatePicker.TableHeader
                    v-for="(weekDay, id) in api.weekDays"
                    :key="id"
                    class="text-sm font-medium text-gray-500 dark:text-gray-400 w-12 h-7 text-center"
                  >
                    {{ weekDay.narrow }}
                  </DatePicker.TableHeader>
                </DatePicker.TableRow>
              </DatePicker.TableHead>
              <DatePicker.TableBody>
                <DatePicker.TableRow
                  v-for="(week, id) in api.getOffset({ months: index - 1 })
                    .weeks"
                  :key="id"
                >
                  <DatePicker.TableCell
                    v-for="(day, id) in week"
                    :key="id"
                    :value="day"
                    class="pe-0 ps-0"
                    :visible-range="
                      api.getOffset({ months: index - 1 }).visibleRange
                    "
                  >
                    <DatePicker.TableCellTrigger
                      class="group relative w-12 h-12 text-sm text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 hover:rounded-lg data-selected:bg-gray-900 data-selected:text-white rounded-lg dark:data-selected:bg-gray-200 dark:data-selected:text-gray-900 transition-colors data-outside-range:hidden flex flex-col items-center justify-center font-medium gap-0.5"
                    >
                      <span>{{ day.day }}</span>
                      <span
                        v-if="
                          mockPriceData[
                            formatDate(
                              day.toDate(
                                Intl.DateTimeFormat().resolvedOptions().timeZone
                              )
                            )
                          ]
                        "
                        :class="`text-xs font-normal ${
                          mockPriceData[
                            formatDate(
                              day.toDate(
                                Intl.DateTimeFormat().resolvedOptions().timeZone
                              )
                            )
                          ] <= GOOD_PRICE_THRESHOLD
                            ? 'text-green-600 dark:text-green-400 dark:group-data-selected:text-green-600'
                            : 'text-gray-400 dark:text-gray-400 dark:group-data-selected:text-gray-600'
                        }`"
                      >
                        ${{
                          mockPriceData[
                            formatDate(
                              day.toDate(
                                Intl.DateTimeFormat().resolvedOptions().timeZone
                              )
                            )
                          ]
                        }}
                      </span>
                    </DatePicker.TableCellTrigger>
                  </DatePicker.TableCell>
                </DatePicker.TableRow>
              </DatePicker.TableBody>
            </DatePicker.Table>
          </div>
        </DatePicker.Context>
      </DatePicker.View>
      <DatePicker.View view="month">
        <DatePicker.Context v-slot="api">
          <DatePicker.ViewControl
            class="flex items-center justify-between mb-4"
          >
            <DatePicker.PrevTrigger
              class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors text-gray-700 dark:text-gray-300"
            >
              <ChevronLeftIcon class="w-4 h-4" />
            </DatePicker.PrevTrigger>
            <DatePicker.ViewTrigger
              class="text-base font-semibold text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 px-2 py-1 rounded-md transition-colors"
            >
              <DatePicker.RangeText />
            </DatePicker.ViewTrigger>
            <DatePicker.NextTrigger
              class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors text-gray-700 dark:text-gray-300"
            >
              <ChevronRightIcon class="w-4 h-4" />
            </DatePicker.NextTrigger>
          </DatePicker.ViewControl>
          <DatePicker.Table class="w-full border-separate border-spacing-y-0.5">
            <DatePicker.TableBody>
              <DatePicker.TableRow
                v-for="(months, id) in api.getMonthsGrid({
                  columns: 4,
                  format: 'short',
                })"
                :key="id"
              >
                <DatePicker.TableCell
                  v-for="(month, id) in months"
                  :key="id"
                  :value="month.value"
                >
                  <DatePicker.TableCellTrigger
                    class="w-16 h-10 text-sm text-gray-900 dark:text-gray-100 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 rounded-lg transition-colors data-selected:bg-gray-900 data-selected:text-white data-selected:rounded-lg dark:data-selected:bg-gray-200 dark:data-selected:text-gray-900 data-unavailable:text-gray-400 dark:data-unavailable:text-gray-500 data-unavailable:line-through data-unavailable:pointer-events-none cursor-pointer flex items-center justify-center font-medium"
                  >
                    {{ month.label }}
                  </DatePicker.TableCellTrigger>
                </DatePicker.TableCell>
              </DatePicker.TableRow>
            </DatePicker.TableBody>
          </DatePicker.Table>
        </DatePicker.Context>
      </DatePicker.View>
      <DatePicker.View view="year">
        <DatePicker.Context v-slot="api">
          <DatePicker.ViewControl
            class="flex items-center justify-between mb-4"
          >
            <DatePicker.PrevTrigger
              class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors text-gray-700 dark:text-gray-300"
            >
              <ChevronLeftIcon class="w-4 h-4" />
            </DatePicker.PrevTrigger>
            <DatePicker.ViewTrigger
              class="text-base font-semibold text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 px-2 py-1 rounded-md transition-colors"
            >
              <DatePicker.RangeText />
            </DatePicker.ViewTrigger>
            <DatePicker.NextTrigger
              class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors text-gray-700 dark:text-gray-300"
            >
              <ChevronRightIcon class="w-4 h-4" />
            </DatePicker.NextTrigger>
          </DatePicker.ViewControl>
          <DatePicker.Table class="w-full border-separate border-spacing-y-0.5">
            <DatePicker.TableBody>
              <DatePicker.TableRow
                v-for="(years, id) in api.getYearsGrid({ columns: 4 })"
                :key="id"
              >
                <DatePicker.TableCell
                  v-for="(year, id) in years"
                  :key="id"
                  :value="year.value"
                >
                  <DatePicker.TableCellTrigger
                    class="w-16 h-10 text-sm text-gray-900 dark:text-gray-100 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 rounded-lg transition-colors data-selected:bg-gray-900 data-selected:text-white data-selected:rounded-lg dark:data-selected:bg-gray-200 dark:data-selected:text-gray-900 flex items-center justify-center font-medium"
                  >
                    {{ year.label }}
                  </DatePicker.TableCellTrigger>
                </DatePicker.TableCell>
              </DatePicker.TableRow>
            </DatePicker.TableBody>
          </DatePicker.Table>
        </DatePicker.Context>
      </DatePicker.View>
    </DatePicker.Content>
  </DatePicker.Root>
</template>
